<template>
  <div 
    class="dashboard-layout" 
    :class="[`layout-${layout}`, { 'scanline-container': true }]"
    :style="layoutStyle"
  >
    <slot />
  </div>
</template>

<script setup lang="ts">
import { computed } from 'vue'
import type { DashboardLayoutProps } from '@/types'

const props = withDefaults(defineProps<DashboardLayoutProps>(), {
  layout: 'grid',
  columns: 3,
  gap: 16
})

const layoutStyle = computed(() => {
  if (props.layout === 'grid') {
    return {
      gridTemplateColumns: `repeat(${props.columns}, 1fr)`,
      gap: `${props.gap}px`
    }
  }
  return {
    gap: `${props.gap}px`
  }
})
</script>

<style lang="scss" scoped>
.dashboard-layout {
  width: 100%;
  min-height: 100vh;
  padding: 2rem;
  
  &.layout-grid {
    display: grid;
    
    @media (max-width: 1200px) {
      grid-template-columns: repeat(2, 1fr) !important;
    }
    
    @media (max-width: 768px) {
      grid-template-columns: 1fr !important;
    }
  }
  
  &.layout-flex {
    display: flex;
    flex-wrap: wrap;
    
    > * {
      flex: 1 1 300px;
    }
  }
  
  &.layout-masonry {
    column-count: 3;
    column-gap: var(--gap, 16px);
    
    @media (max-width: 1200px) {
      column-count: 2;
    }
    
    @media (max-width: 768px) {
      column-count: 1;
    }
    
    > * {
      break-inside: avoid;
      margin-bottom: var(--gap, 16px);
    }
  }
}
</style>
